<template>
  <div class="completeTask-container">
    <!-- 过滤添加导航 -->
    <select-bar @changeRadioVal="changeVal"></select-bar>
    <!-- 表格数据 -->
    <table-bar :tableList="tableData"></table-bar>
    <!-- 分页组件 -->
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="query.currentPage"
      :page-size="query.pageSize"
      layout="total, prev, pager, next"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import {
  getCompleteTaskTable,
  getcompleteTaskStatusData,
} from "@/api/task/completeTask";
import SelectBar from "./component/selectBar";
import TableBar from "./component/taskTable";
export default {
  name: "completeTasks",

  components: {
    SelectBar,
    TableBar,
  },

  data() {
    return {
      query: {
        currentPage: 1,
        pageSize: 10, // 每页显示的行数
      },
      tableData: [],
      total: 0,
    };
  },

  mounted() {
    this.getDataList();
  },

  methods: {
    // 分页组件的翻页效果
    handleCurrentChange(newPage) {
      this.query.currentPage = newPage;
      this.getDataList()
    },

    // 发送请求获取数据
    getDataList() {
      getCompleteTaskTable(this.query).then((res) => {
        if (res.status !== 200)
          return this.$message.error("完成业务表格请求失败！！");
        else {
          this.tableData = res.data.list;
          this.total = res.data.total;
          return;
        }
      });
    },

    getStatusData(statusVal) {
      getcompleteTaskStatusData(statusVal, this.query.currentPage, this.query.pageSize).then((res) => {
        if (res.status !== 200)
          return this.$message.error("业务表格请求失败！！");
        else {
          this.tableData = res.data.list;
          this.total = res.data.total;
          return;
        }
      });
    },

    // 子向父传来的回调 Radio
    changeVal(val) {
      let radioStatus = false;
      if (val === "1") {
        this.getDataList();
        return;
      } else if (val === "2") {
        radioStatus = !radioStatus;
      }
      this.getStatusData(radioStatus);
      return;
    },
  },
};
</script>

<style lang="less" scoped>
</style>